<template>
        <li>
            <router-link :to="djRoute" class="dj-link">
                <img class="dj-img" :src="imgUrl" :alt="name">
        
            </router-link>

            <div class="info">
                    <p>
                        <router-link :to="djRoute" class="name f-thide">{{ name }}</router-link> 
                    </p>
                    <p class="introduce f-thide">{{ introduce }}</p>
                </div>
        </li>
</template>
<script setup>
    defineProps({
        "name":String,
        "imgUrl":String,
        "djRoute":String,
        "introduce":String
    })
    </script>
<style lang="scss" scoped>
     li{
            float: left;
            width: 210px;
            height: 50px;
            .dj-link{
                float: left;
                width: 40px;
                margin-right: 10px;
                .dj-img{
                    width: 40px;
                    height: 40px;
                    box-shadow: 0 0 1px #333333 inset;
                }
        
            }

            .info{
                    float: left;
                    width: 160px;
                    line-height: 21px;
                    p{
                        width: 100%;
                        .name{
                            display: inline-block;
                            zoom: 1;
                            max-width: 88%;
                            vertical-align: middle;
                            color: #000;
                        }
                        
                    }

                    .introduce{
                            color: #666;
                        }
                }
        }
</style>